/* ========== Instagram Section : START =========== */
.instagram-section { background: #ffffff; padding: 60px 0; margin-bottom: 0; }
.instagram-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; max-width: 1400px; margin: 0 auto; }
.instagram-item { position: relative; overflow: hidden; border-radius: 0; aspect-ratio: 320 / 420; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease; }
.instagram-item:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(84,84,184,0.25); }
.instagram-link { display: block; width: 100%; height: 100%; position: relative; }
.instagram-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.instagram-item:hover .instagram-image { transform: scale(1.1); }
.instagram-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #652f8dd9; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.instagram-item:hover .instagram-overlay { opacity: 1; }
.instagram-overlay i { font-size: 36px; color: white; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1);} 50% { transform: scale(1.1);} }
.instagram-item.video-item::after { content: ''; position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; background: rgba(255,255,255,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; }
.video-play-icon { position: relative; z-index: 3; }
.video-play-icon i { color: white !important; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
@media screen and (max-width: 1200px) { .instagram-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; } .instagram-section { padding: 50px 0; } }
@media screen and (max-width: 768px) { .instagram-grid { grid-template-columns: repeat(3, 1fr); gap: 3px; } .instagram-section { padding: 40px 0; } .instagram-overlay i { font-size: 28px; } }
@media screen and (max-width: 480px) { .instagram-grid { grid-template-columns: repeat(3, 1fr); gap: 2px; } .instagram-section { padding: 30px 0; } }
/* ========== Instagram Section : END =========== */
/* ========== Instagram Modal : START =========== */
.instagram-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; align-items: center; justify-content: center; }
.instagram-modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); }
.instagram-modal-content { position: relative; background: white; max-width: 935px; width: 90%; max-height: 90vh; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: modalSlideIn 0.3s ease-out; }
@keyframes modalSlideIn { from { opacity:0; transform: scale(0.9) translateY(20px);} to { opacity:1; transform: scale(1) translateY(0);} }
.instagram-modal-close { position: absolute; top: 15px; right: 15px; background: rgba(0,0,0,0.5); color: white; border: none; width: 30px; height: 30px; border-radius: 50%; font-size: 18px; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; }
.instagram-modal-close:hover { background: rgba(0,0,0,0.7); transform: scale(1.1); }
.instagram-modal-body { display: flex; height: 600px; }
.instagram-modal-media { flex: 0 0 60%; background: #000; position: relative; display: flex; align-items: center; justify-content: center; }
.instagram-media-container { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.instagram-modal-image, .instagram-modal-video { max-width: 100%; max-height: 100%; object-fit: contain; }
.instagram-modal-video { width: 100%; height: 100%; }
.instagram-slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.8); border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 20px; font-weight: bold; cursor: pointer; z-index: 5; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; }
.instagram-slider-btn:hover { background: rgba(255,255,255,1); transform: translateY(-50%) scale(1.1); }
.instagram-slider-prev { left: 15px; }
.instagram-slider-next { right: 15px; }
.instagram-slider-btn i { font-size: 16px; color: #262626; display: inline-flex; }
.instagram-slider-dots { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; }
.slider-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; transition: all 0.2s ease; }
.slider-dot.active { background: rgba(255,255,255,1); transform: scale(1.2); }
.instagram-modal-info { flex: 0 0 40%; display: flex; flex-direction: column; background: white; }
.instagram-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid #efefef; }
.instagram-profile { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; transition: opacity 0.2s ease; }
.instagram-profile:hover { opacity: 0.8; text-decoration: none; color: inherit; }
.instagram-profile-pic { width: 40px; height: 40px; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.instagram-profile-pic img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.instagram-profile-info { display: flex; flex-direction: column; gap: 2px; }
.instagram-username { font-weight: 600; font-size: 14px; color: #262626; }
.instagram-name { font-size: 12px; color: #8e8e8e; font-weight: normal; }
.instagram-options { cursor: pointer; padding: 8px; border-radius: 50%; transition: background 0.2s ease; }
.instagram-options:hover { background: #f0f0f0; }
.instagram-modal-caption { padding: 20px; overflow-y: auto; max-height: 300px; }
.caption-text { font-size: 14px; line-height: 1.5; color: #262626; white-space: pre-wrap; }
.hashtag { color: #00376b; font-weight: 600; cursor: pointer; }
.hashtag:hover { text-decoration: underline; }
.instagram-modal-actions { padding: 20px; border-top: 1px solid #efefef; }
.instagram-action-buttons { display: flex; gap: 15px; margin-bottom: 15px; }
.instagram-action-btn { background: none; border: none; font-size: 24px; cursor: pointer; padding: 5px; border-radius: 50%; transition: all 0.2s ease; color: #262626; }
.instagram-action-btn:hover { background: #f0f0f0; transform: scale(1.1); }
.instagram-likes { margin-bottom: 10px; }
.instagram-likes span { font-size: 14px; font-weight: 600; color: #262626; }
.instagram-timestamp { margin-bottom: 15px; }
.time-text { font-size: 12px; color: #8e8e8e; text-transform: uppercase; }
.instagram-share-btn { text-align: right; }
.btn-share { background: #0095f6; color: white; border: none; padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; }
.btn-share:hover { background: #1877f2; transform: translateY(-1px); }
@media screen and (max-width: 768px) { .instagram-modal-content { width: 95%; height: 95vh; max-height: none; } .instagram-modal-body { flex-direction: column; height: 100%; } .instagram-modal-media { flex: 0 0 50%; } .instagram-modal-info { flex: 0 0 50%; } .instagram-slider-btn { width: 35px; height: 35px; font-size: 16px; } .instagram-slider-prev { left: 10px; } .instagram-slider-next { right: 10px; } .instagram-modal-caption { max-height: 210px; } .instagram-timestamp { margin-bottom: 0; } }
@media screen and (max-width: 480px) { .instagram-modal-content { width: calc(100% - 40px); height: calc(100% - 40px); border-radius: 0; } .instagram-modal-close { top: 10px; right: 10px; background: rgba(0,0,0,0.7); } .instagram-modal-header { padding: 15px; } .instagram-modal-caption { padding: 15px; } .instagram-modal-actions { padding: 15px; } }
/* ========== Instagram Modal : END =========== */